<template>
    <div >
        <h2>演示异步加载组件</h2>
        <div class="card">
            <h3>第1个自定义组件</h3>
            <div class="row">输入你想传递给子组件的值:<input type="text" v-model="messageFromMain1"></div>
            <div class="row">传递给子组件的config: {{ configFromMain1 }}</div>
            <Component :is="currentComponent" :message="messageFromMain1"
                          :number="numberFromMain1"
                          :config="configFromMain1"
                          @handle-completed="handleCompleted1"
                          v-model="dataModel1"></Component>
            <p>子组件给我的消息: {{ valueFromMyComponent1 }}</p>
            <p>父子组件v-model: {{ dataModel1 }}</p>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
            my: () => import('@/views/component_async/my-component.vue')
        },
        data () {
            return {
                currentComponent: "my",
                /**
                 * 传递给自定义组件的参数
                 */
                messageFromMain1: "牛奶",
                /**
                 * 子组件存在验证，所以这个值不能小于0
                 */
                numberFromMain1: 1,
                configFromMain1: {
                    name: "Java 夜未眠",
                    price: 29.00
                },
                /**
                 * 传递给自定义组件的参数
                 */
                messageFromMain2: "咖啡",
                /**
                 * 子组件存在验证，所以这个值不能小于0
                 */
                numberFromMain2: 2,
                configFromMain2: {
                    name: "三体",
                    price: 128.00
                },
                valueFromMyComponent1: "",
                valueFromMyComponent2: "",
                dataModel1: "现在是父组件的值1",
                dataModel2: "现在是父组件的值2"
            }
        },
        methods: {
            handleCompleted1(value) {
                this.valueFromMyComponent1 = value;
            },
            handleCompleted2(value) {
                this.valueFromMyComponent2 = value;
            }
        }
    }
</script>
<style scoped>
    h2{
        margin: 30px 0;
    }

    .card {
        border: green solid 1px;
        margin: 30px;
    }

    .row {
        margin: 10px;
    }
</style>